import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';
import Stats from 'three/addons/libs/stats.module.js';
const cameraPos = new THREE.Vector3(12, 8, 0);

export let scene: THREE.Scene,
    renderer: THREE.WebGLRenderer,
    css2dRenderer: CSS2DRenderer,
    css3dRenderer: CSS3DRenderer,
    controls: OrbitControls,
    ambientLight: THREE.AmbientLight,
    light: THREE.DirectionalLight,
    camera: THREE.PerspectiveCamera,
    ground: THREE.Mesh,
    stats: Stats,
    width: number,
    height: number

export const init = () => {

    width = window.innerWidth, height = window.innerHeight

    scene = new THREE.Scene()
    const sceneColor = 0x13151d
    scene.background = new THREE.Color(sceneColor)
    scene.fog = new THREE.Fog(sceneColor, 20, 50);

    // scene.add(new THREE.AxesHelper(50))

    const canvas = document.getElementsByClassName('3dCanvas')

    if (canvas) {
        renderer = new THREE.WebGLRenderer({
            canvas: canvas[0],
            antialias: true,
            powerPreference: 'high-performance' // 高性能
        });
    }

    stats = new Stats();

    document.body.appendChild(stats.dom)
    renderer.setSize(width, height);

    // 设置阴影
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.needsUpdate = true
    renderer.shadowMap.autoUpdate = true

    RectAreaLightUniformsLib.init();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.2, 2000000);
    camera.position.copy(cameraPos);

    controls = new OrbitControls(camera, renderer.domElement);
    controls.target = new THREE.Vector3(0, 3, 0)
    controls.update()
    controls.addEventListener('change', () => {
        light.position.copy(camera.position.clone().negate().setY(camera.position.y))
        // console.log(camera.position);


    })

    createGround()
    initLight()




}

const createGround = () => {

    const textureLoader = new THREE.TextureLoader();




    textureLoader.load(`${import.meta.env.VITE_ASSETS_URL}/assets/images/背景图.png`, function (texture) {
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        // 背景图重复次数
        texture.repeat.set(1, 2);

        // 设置贴图偏移值
        texture.offset.set(0, 0.12); // 这里的值可以根据你需要的偏移来调整

        const material = new THREE.MeshLambertMaterial({
            map: texture,
        })

        ground = new THREE.Mesh(new THREE.BoxGeometry(18, 0, 100, 1, 1, 1), material);

        ground.rotation.copy(new THREE.Euler(-Math.PI, -Math.PI * 0.5, 0))
        ground.receiveShadow = true;
        ground.position.z = 0.8
        scene.add(ground)
    });

}
const initLight = () => {
    ambientLight = new THREE.AmbientLight(0xd3e3fd);

    light = new THREE.DirectionalLight(0xffffff, 0.5);
    light.position.set(6, 6, 6);
    light.castShadow = true;
    const d = 14;
    light.shadow.camera.left = - d;
    light.shadow.camera.right = d;
    light.shadow.camera.top = d;
    light.shadow.camera.bottom = - d;

    light.shadow.camera.near = 0.001;
    light.shadow.camera.far = 100;

    light.shadow.mapSize.x = 1024;
    light.shadow.mapSize.y = 1024;

    scene.add(light)

    const rectLight = new THREE.RectAreaLight(0xffffff, 5, 4, 20);
    rectLight.position.set(0, 8, 10);
    rectLight.lookAt(0, -5, 0)
    scene.add(rectLight);

    scene.add(ambientLight)
}




